import React, {Component} from 'react';

import { hashHistory , Router, Route, Link , IndexRoute} from 'react-router';

import Main from '../components/Main.jsx';

import Book from '../components/book/Book.jsx';    //书籍详情
import Books from '../components/book/Books.jsx';  //书籍列表
import MovieIndex from '../components/movie/index.jsx';//电影列表


class MyRouter extends Component {
    render() {
        return (

           <Router history={ hashHistory}>
                {/** history={ hashHistory} 不写这个就报错 */}
                {/** React Router 是建立在 history 之上的。
                    简而言之，一个 history 知道如何去监听浏览器地址栏的变化，
                    并解析这个 URL 转化为 location 对象，
                然后 router 使用它匹配到路由，最后正确地渲染对应的组件。 */}


                <Route path='/' component = {Main} >
                {/**配置根目录的jsx  会根据 下面的Route的path 内容 拿到相应组件 传给Main
                    Main 中通过 {this.props.children} 获取到组件 */}

                    <IndexRoute component={MovieIndex}/>
                    {/**默认情况下 {this.props.children} 没有数据 IndexRoute 为设置默认组件 */}

                    <Route path='movies' component = {MovieIndex} />


                    <Route path='books' component = {Books} />

                    <Route path='book/:bid' component = {Book} />

                </Route>

           </Router>


        );
    }
}

export default MyRouter;